<template>
    <div>
        <div class="banner" @click="handleBannerClcik">
            <img class="banner-img" :src="bannerImg" alt="">
            <div class="banner-info">
                <div class="banner-title">
                    {{this.sightName}}
                </div>
                <div class="banner-number">
                    <span class="iconfont bannerIcon">&#xe678;</span>
                    <span class="number">{{this.bannerImgs.length}}</span>
                </div>
            </div>
        </div>
        <common-gallary :imgs="bannerImgs" v-show="showGallary" @close="handleGallaryClose"></common-gallary>
    </div>
</template>
<script>
import CommonGallary from "common/gallary/Gallary";
// import FadeAnimation from "common/fade/FadeAnimation";
export default {
  name: "DetailBanner",
  props:{
      sightName: String,
      bannerImg: String,
      bannerImgs: Array
  },
  data () {
      return {
          showGallary: false,
      }
  },
  components: {
    CommonGallary,
    // FadeAnimation
  },
  methods: {
      handleBannerClcik () {
          this.showGallary = true
      },
      handleGallaryClose () {
          this.showGallary = false
      }
  }
};
</script>
<style lang="stylus" scoped>
.banner {
    height: 0;
    overflow: hidden;
    padding-bottom: 55%;
    position: relative;
}

.banner-img {
    width: 100%;
}

.banner-info {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    line-hight: 0.6rem;
    color: #fff;
}

.banner-title {
    flex: 1;
    text-align: left;
    padding: 0 0.2rem;
}

.banner-number {
    height: 0.4rem;
    line-height: 0.4rem;
    padding: 0 0.4rem;
    border-radius: 0.2rem;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9;
    font-size .24rem
}
.banner-info {
    height .4rem
    line-height .4rem
    padding-bottom .1rem;
    background-image :linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.8))
}
.bannerIcon{
    float left
    margin-right .02rem
}
.number{
    float left
}
</style>
